<template>
    <div class="numerical-component">
        <filter-params :config="config" ></filter-params>
        <div class="numerical-content">
            <div v-for="item in showData" class="numerical-component-list-common" :class="[config.isBorder==false?'numerical-component-list-common-show':'']" :style="{'width':100/config.rowNum_pc+'%','text-align':(config.align=='left'?'left':'center')}">
               <div class="numerical-component-list-bo" :style="{'border':(config.isBorder==true?config.borderSize+'px solid '+config.borderColor:'')}">
                   <div class="numerical-component-list-common-head">{{item.dimension}}</div>
                   <div v-for="(measure,index) in item.measures" :style="{'font-size':measure.fontSize +'px','color':measure.fontColor}">
                       <span v-if="index!=0 || config.indicatorName">{{measure.title}}</span>
                       {{measure.value}}
                   </div>
               </div>
            </div>
        </div>
    </div>
</template>

<script>
import FilterParams from "../FilterParams.vue";
import BusEvent from "@/views/modules/form/FormCustomView/components/BusEvent.js";
import PublicApi from "@/common/api/form/public.js";
import ChartDataModelApi from "@/common/api/form/chartDataModel.js";

/**
 * 指标卡
 */
export default {
    name: "numericalComponent",
    components:{
        FilterParams
    },
    mixins:[BusEvent],
    props: {
        config: {
            type: Object
        },
    },
    data() {
        return {
            //根据模型查询到的数据
            data: [],
            //事件参数
            params:{},
            //展示数据
            showData:[]
        }
    },
    created() {
        this.initParams();
        let self=this;
        this.getParams(function (res) {
            if(res){
                Object.assign(self.params,res);
            }
            self.init();
        })
    },
    methods: {
        //获取参数
        initParams(){
            let mapping = this.config.receive.mapping;
            if(mapping && mapping.length>0 ){
                //取路由参数
                let params=this.getRouterParams();
                for (let i = 0; i < mapping.length; i++) {
                    let value="";
                    if(this.config.receive.type=='url'){
                        if(mapping[i].valueSource=='param'){
                            if(params[mapping[i].valueDef]){
                                value=params[mapping[i].valueDef]
                            }else {
                                let arr = mapping[i].name.split(".");
                                let name=arr[arr.length-1];
                                if(params[name]){
                                    value=params[name];
                                }
                            }
                        }
                    }
                    this.params[mapping[i].name]=value;
                }
            }
        },
        //初始化
        init(){
            let obj={
                dataModel:this.config.dataModel,
                measures:this.config.measures,
                dimensions:this.config.dimensions,
                colorLegends:[],
                filterParams:[],
                params:this.params
            }
            let self=this;
            //获取数据
            ChartDataModelApi.getData(JSON.stringify(obj)).then(res => {
                if (res.data && res.data.length > 0) {
                    self.data = res.data;
                    self.initShowData();
                }
            });
        },
        //获取初始化数据
        initShowData(){
            let showData=[];
            for (let i=0; i < this.data.length; i++) {
                let showItem={
                    dimension:"",
                    measures:[]
                };
                let item=this.data[i];
                //维度
                if(this.config.dimensions && this.config.dimensions.length>0){
                    let dimension=this.config.dimensions[0];
                    let dimensionVal= item[dimension.tableName+'_'+dimension.fieldName];
                    showItem.dimension=dimensionVal;
                }
                //度量
                let measures=[];
                for (let j = 0; j < this.config.measures.length; j++) {
                    let measure=this.config.measures[j];
                    let measureVal =item[measure.tableName+'_'+measure.fieldName];
                    if(!measureVal) {
                        measureVal=0;
                    }
                    let title=measure.fieldLabel;
                    let value=measureVal;
                    let fontSize=24;
                    let fontColor="#000000";
                    if(measure.styleSetting){
                        title=measure.styleSetting.newName || title;
                        value=measure.styleSetting.prefix+value+measure.styleSetting.suffix;
                        fontSize=measure.styleSetting.fontSize || fontSize;
                        fontColor=measure.styleSetting.fontColor || fontColor;
                    }
                    measures.push({
                        title:title,
                        value:value,
                        fontSize:fontSize,
                        fontColor:fontColor
                    });
                }
                showItem.measures=measures;
                showData.push(showItem);
            }
            this.showData=showData;
        },
        getParams(callback){
            if(!this.config.receive || !this.config.receive.mapping){
                callback({});
            }
            PublicApi.getParams(JSON.stringify(this.config.receive.mapping)).then(res=>{
                callback(res);
            }).catch(err=>{
                callback({});
            })
        },
        //处理接收到的事件
        handReceive(args) {
            let receive = this.config.receive;
            //地图类型配置
            let mapTypeConf = this.config.mapTypeConf;
            if ( receive.type=='event' &&receive.publishComponent == args.component) {
                let inputParams = args.params;
                let params = {};
                //读取配置的参数
                for (let i = 0; i < receive.mapping.length; i++) {
                    let o = receive.mapping[i];
                    //处理没有配置值来源的情况。
                    if(!o.valueDef && inputParams[o.name]){
                        params[o.name]=inputParams[o.name]
                    }
                    else if (o.valueSource == 'param' && inputParams[o.valueDef]) {
                        params[o.name] = inputParams[o.valueDef];
                    }
                }
                this.params=params;
                //初始化图表
                this.init();
            }
        },
    },
    watch: {
        config:{
            handler: function (val, oldVal) {
                let self=this;
                setTimeout(function () {
                    self.init();
                },2000)
            },
            deep: true
        },
    }
}
</script>

<style scoped>
.numerical-component{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.numerical-content{
    flex: 1;
}
.numerical-component-list-common-head{
    font-size: 20px;
    font-weight: 600;
}
.numerical-component-list-common{
    text-align: center;
    float: left;
    margin-bottom: 20px;
}

.numerical-component-list-bo{
    width: 98%;margin: auto;
    padding: 10px 0px;
    border-radius: 5px;
}
</style>
